<template>
  <div class="box">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item>
          <el-input placeholder="请输入内容"
                    v-model="searchData.val"
                    size="small"
                    clearable
                    class="input-with-select">
            <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
              <el-option v-for="(item, index) in searchDic"
                         :key="index"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </search>
    </div>

    <section class="fun-btn">
      <el-button class="btn" type="primary" size="mini" @click="handleRegister">登记</el-button>
      <el-button class="btn" type="primary" size="mini" @click="handleDrawer('其他人员信息')">其他人员信息</el-button>
      <el-button class="btn" type="primary" size="mini" @click="handleDrawer('证明材料')">证明材料</el-button>
      <el-button class="btn" type="primary" size="mini" @click="handleDrawer('调卷信息')">调卷信息</el-button>
      <!--<el-button class="btn" type="primary" size="mini">查询记录</el-button>-->
      <el-button class="btn" @click="handleDrawer('登记单预览')" type="primary" size="mini">登记单预览</el-button>
      <el-button class="btn" @click="handleDrawer('利用列表')" type="primary" size="mini">利用列表</el-button>

    </section>

    <section class="list-box">
      <el-table
        :data="tableData.list"
        border
        v-loading="tableLoading"
        height="calc(100vh - 232px)"
        @selection-change="handleSelectionChange"
        class="table">
        <el-table-column
          fixed="left"
          type="selection"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          fixed="left"
          type="index"
          label="序号"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="registerNo"
          label="登记单号"
          width="220">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="username"
          label="利用人">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userPhone"
          label="联系方式"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreate"
          label="登记时间"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="certificateNo"
          label="证件号码"
          width="220">
        </el-table-column>
        <el-table-column
          prop="isOtherPerson"
          label="其他人员">
          <template slot-scope="scope">
            <span>{{scope.row.isOtherPerson ? '有' : '无'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isCertificateData"
          label="证明材料">
          <template slot-scope="scope">
            <span>{{scope.row.isCertificateData ? '有' : '无'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isRetrieveRecord"
          label="调卷">
          <template slot-scope="scope">
            <span>{{scope.row.isRetrieveRecord ? '有' : '无'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isUseArc"
          label="利用档案">
          <template slot-scope="scope">
            <span>{{scope.row.isUseArc ? '有' : '无'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="applyStatus"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.applyStatus === '1'" style="color: #67C23A">待办结</span>
            <span v-if="scope.row.applyStatus === '2'">已办结</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="handleDel(scope.row)" type="text" style="color: #F56C6C">删除</el-button>
            <el-button type="text" @click="handleFinish(scope.row)" v-if="scope.row.applyStatus === '1'">办结</el-button>
            <el-button type="text" @click="handleContinue(scope.row)" v-if="scope.row.applyStatus === '2'">继续办理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(tableData.total)">
      </el-pagination>
    </section>

    <el-dialog :title="'登记'"
               :width="'1240px'"
               top="5vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogVisible">

      <add-register @handleSuccess="handleSuccess"></add-register>

    </el-dialog>

    <el-drawer
      :title="setDrawer.title"
      size="100%"
      direction="rtl"
      :visible.sync="drawer"
    ><!--:with-header="false"-->

      <!--其他人员信息-->
      <ready-people v-if="setDrawer.title === drawerTitle[0]"
                    :rowData="rowData"></ready-people>

      <!--证明材料-->
      <prove-material :rowData="rowData"
                      v-if="setDrawer.title === drawerTitle[1]"></prove-material>

      <investigation-register v-if="setDrawer.title === drawerTitle[2]"
                              :rowData="rowData"></investigation-register>

      <pdf-js-iframe v-if="setDrawer.title === '登记单预览'" :url="pdfSrc" :fileName="'登记单' + '.pdf'"></pdf-js-iframe>
      <!--<iframe v-if="setDrawer.title === '登记单预览'"
              :src='pdfSrc'
              width="100%"
              height="100%"></iframe>-->

      <!--利用列表-->

      <div v-if="setDrawer.title === '利用列表'" style="padding: 0 15px">
        <utilize-archives-list type="self"
                               :idRegister="tableSelected.length > 0 ? tableSelected[0].id : ''">
        </utilize-archives-list>
      </div>

    </el-drawer>

  </div>
</template>

<script>
import Search from '../../../components/search/search'
import AddRegister from './registerTemplate/addRegister'
import ReadyPeople from './registerTemplate/readyPeople'
import ProveMaterial from './registerTemplate/proveMaterial'
import InvestigationRegister from './registerTemplate/investigationRegister'
import {
  continueDjList,
  detDjList,
  finishDjList,
  getDjList,
  getDjPreviewPdf
} from '../../../api/utilize/utilizeDengji'
import { getArchivesDicId } from '../../../api/dictionary/dictionary'
import { getObjectURL } from '../../../util/util'
import UtilizeArchivesList from './UtilizeArchivesList'
import PdfJsIframe from '../../../components/showPdf/pdfJsIframe'

export default {
  name: 'UtilizeRegister',
  components: {
    PdfJsIframe,
    UtilizeArchivesList,
    InvestigationRegister,
    ProveMaterial,
    ReadyPeople,
    AddRegister,
    Search
  },
  data () {
    return {
      tableLoading: true,
      dialogVisible: false,
      drawer: false,
      setDrawer: {
        title: ''
      },
      searchDic: [], // 搜索条件list
      drawerTitle: ['其他人员信息', '证明材料', '调卷信息', '利用列表'],
      searchData: {
        val: '',
        select: ''
      },
      page: {
        pageNo: 1,
        pageSize: 1000
      },
      params: [], // 搜索筛选条件
      tableData: [],
      tableSelected: [], // 选中条目
      rowData: {},
      pdfSrc: '' // 登记单预览pdf
    }
  },
  mounted () {
    this.getList()
    this.getDic()
  },
  methods: {
    getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      if (this.params.length > 0) {
        param.params = this.params
      }
      getDjList(param).then(res => {
        this.tableData = res.data.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    getDic () {
      getArchivesDicId('utilize_search').then(res => {
        // 搜索条件
        this.searchDic = res.data.data
        this.searchData.select = res.data.data[0].dictValue
        /* res.data.data.map(item => {
          if (item) {
            this.searchData.select = 'tm'
          }
        }) */
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      // 搜索
      this.params = []
      this.page.pageNo = 1
      if (this.searchData.val) {
        this.params.push({
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        })
      }
      this.getList()
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleContinue (row) {
      // 继续办理
      continueDjList(row.id).then(() => {
        this.$message.success('继续办理操作成功！')
        this.getList()
      })
    },
    handleFinish (row) {
      // 办结
      finishDjList().then(() => {
        this.$message.success('办结操作成功！')
        this.getList()
      })
    },
    handleRegister () {
      this.dialogVisible = true
    },
    handleSuccess () {
      // 新增成功
      this.dialogVisible = false
      this.getList()
    },
    handleDrawer (type) {
      if (this.tableSelected.length !== 1) {
        this.$message.warning('请选择一条数据进行操作！')
        return
      }
      if (this.tableSelected.length === 1) {
        this.rowData = this.tableSelected[0]
      }
      if (type === '登记单预览') {
        //
        getDjPreviewPdf(this.rowData.id).then(res => {
          this.pdfSrc = getObjectURL(res.data)
        })
      }

      this.setDrawer.title = type
      this.drawer = true
    },
    handleDel (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detDjList([row.id]).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
